<template>
    <el-container :style="{ height: containerHeight + 'px' }">
        <el-main class="main">
            <!-- 搜索栏 -->
            <el-form :inline="true">
                <el-form-item>
                    <el-tree-select v-model="listParm.sort" :data="tableData.sortList" check-strictly clearable
                        class="sort_select">
                    </el-tree-select>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="listParm.search" placeholder="请输入文章标题" />
                </el-form-item>
                <el-form-item>
                    <el-input v-model="listParm.admin" placeholder="作者id" class="admin_input" />
                </el-form-item>
                <el-form-item>
                    <el-button :icon="Search" @click="serachBtn">搜索</el-button>
                    <el-button type="success" :icon="Plus" @click="addArticleBtn" v-permission="24">新增</el-button>
                </el-form-item>
            </el-form>
            <!-- 管理员列表 -->
            <el-table :data="tableData.list" style="width: 100%" :height="tableHeigth" border stripe>
                <el-table-column prop="id" label="ID" />
                <el-table-column prop="title" label="标题" width="300" />
                <el-table-column label="封面" width="120">
                    <template #default="scope">
                        <template v-if="scope.row.pic">
                            <el-image :src="scope.row.pic" fit="contain" />
                        </template>
                    </template>
                </el-table-column>
                <el-table-column label="状态">
                    <template #default="scope">
                        <el-switch v-model="scope.row.is_active" inline-prompt active-text="发布" inactive-text="下架"
                            :width='50' disabled />
                    </template>
                </el-table-column>
                <el-table-column label="推荐">
                    <template #default="scope">
                        <el-switch v-model="scope.row.is_recommend" inline-prompt active-text="是" inactive-text="否"
                            disabled />
                    </template>
                </el-table-column>
                <el-table-column prop="sort" label="分类" />
                <el-table-column prop="admin" label="作者" />
                <el-table-column prop="date_add" label="添加时间" width="250" />
                <el-table-column prop="date_update" label="更新时间" width="250" />
                <el-table-column width="200" align="center" label="操作" fixed="right">
                    <template #default="scope">
                        <el-button size="small" type="primary" :icon="Edit" @click="editArticleBtn(scope.row.id)"
                            v-permission="25">编辑</el-button>
                        <DelBtn @delBtn="delArticleBtn(scope.row)" :permission="112"></DelBtn>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination @size-change="sizeChange" @current-change="currentChange" :current-page.sync="listParm.page"
                :page-sizes="[10, 20, 30, 50, 100]" :page-size="listParm.size" :total="total"
                layout="total, sizes, prev, pager, next, jumper" class="pagination"></el-pagination>
        </el-main>
    </el-container>
    <ArticleAddAndEdit ref="articleRef" :sortList="tableData.sortList" @newGetArticleList="getArticleList">
    </ArticleAddAndEdit>
</template>

<script setup lang='ts'>
import { ref, reactive, onMounted } from 'vue'

import { Search, Plus, Edit } from '@element-plus/icons-vue'
import { ElMessage } from "element-plus"

import ArticleAddAndEdit from './ArticleAddAndEdit.vue'
import DelBtn from '@/components/DelBtn.vue'
import { DialogType } from '@/hooks/useDialog'
import { delArticleApi, getArticleApi, getArticleSortApi } from '@/http/api/article'

//容器的高度
const containerHeight = ref(window.innerHeight - 120)
//表格的高度
const tableHeigth = ref(window.innerHeight - 260)
// 定义表格数据
const tableData = reactive({
    list: [],
    sortList: []
})
// 表格查询参数
const listParm = reactive({
    search: '',
    page: 1,
    size: 20,
    sort: '',
    admin: ''
})
// 数据总数
const total = ref(0)
// 获取数据
const getArticleList = async () => {
    await getArticleApi(listParm).then(res => {
        if (res && res.code == 200) {
            tableData.list = res.data.results
            total.value = res.data.count
        }
    })
}
// 获取分类
const getSortList = async () => {
    await getArticleSortApi().then(res => {
        if (res && res.code == 200) {
            tableData.sortList = res.data
        }
    })
}
// 页容量改变时触发
const sizeChange = (size: number) => {
    listParm.size = size
    getArticleList()
}
// 页数改变时触发
const currentChange = (page: number) => {
    listParm.page = page
    getArticleList()
}
// 搜索
const serachBtn = () => {
    listParm.page = 1
    getArticleList()
}
// 子组件ArticleAddAndEdit的ref属性
const articleRef = ref<InstanceType<typeof ArticleAddAndEdit>>()
// 添加管理员
const addArticleBtn = () => {
    articleRef.value?.onShow(DialogType.ADD, '添加文章')
}
// 修改管理员
const editArticleBtn = (article_id: number) => {
    articleRef.value?.onShow(DialogType.EDIT, '修改文章', article_id)
}
// 删除管理员
const delArticleBtn = async (delData: any) => {
    await delArticleApi(delData.id).then(res => {
        if (res && res.code == 204) {
            ElMessage.success('删除成功！')
            getArticleList()
        } else {
            ElMessage.error(res.msg)
        }
    })
}

onMounted(() => {
    window.addEventListener("resize", () => {
        containerHeight.value = window.innerHeight - 120
        tableHeigth.value = window.innerHeight - 260
    })
    getArticleList()
    getSortList()
})

</script>

<style scoped lang='scss'>
.main {
    min-width: 750px;
}

.sort_select {
    width: 150px;
}

.admin_input {
    width: 60px;
}

.pagination {
    margin-top: 10px;
}
</style>